<!--首页密码详情-->
<template>
	<view>
		<!--消息提示-->
		<u-notify ref="notify"></u-notify>

		<u-modal :show="showDetail" :showConfirmButton="false" @close="$emit('close')" closeOnClickOverlay>
			<slot name="default">
				<view class="password-detail">
					<view class="password-item">
						<view class="password-text">名称：{{password.passwordName}}</view>
					</view>
					<view class="password-item">
						<view class="password-text">账号：{{password.account}}</view>
						<button @click="copy(password.account)">复制</button>
					</view>
					<view class="password-item">
						<view class="password-text">密码：{{password.password}}</view>
						<button @click="copy(password.password)">复制</button>
					</view>
					<view class="password-item" v-if="password.remark && password.remark !== ''">
						<view class="password-text">备注：{{password.remark}}</view>
					</view>
				</view>
			</slot>
		</u-modal>
	</view>
</template>
<script>
export default {
	props: ['password', 'showDetail'],
	methods: {
		/**
		 * 复制
		 *
		 * @param value 要复制的文字
		 */
		copy(value) {
			uni.setClipboardData({
				data: value,
				showToast: false,
				success: () => this.$refs.notify.success('复制成功')
			});
		}
	}
}
</script>
<style scoped>
.password-detail {
	width: 100%;
	text-align: left;
}
.password-item {
	border-bottom: 1px solid #eeeeee;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 10px 10px;
	box-sizing: border-box;
	align-items: center;
}
/*复制按钮*/
.password-item button {
	width: 70px;
	height: 28px;
	line-height: 28px;
	font-size: 13px;
	margin: 0;
	border-radius: 15px;
	border: none;
	outline: none;
	background-color: #7cdbfe;
	color: white;
}
/*文字*/
.password-text {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	/*-webkit-line-clamp: 2;*/
	-webkit-box-orient: vertical;
	display: -moz-box;
	/*-moz-line-clamp: 2;*/
	-moz-box-orient: vertical;
	word-wrap: break-word;
	word-break: break-all;
	white-space: normal;
}
</style>
